var win_width=0; 
var cxt=null;
var can_width=win_width;
var can_height=200;


var out_juli=5;  //圆心之间的距离
var banjing=2;   //小圆半径
var num_width=8*out_juli;  //数字宽度
var font_size=52; //文字大小
var font_width=60;  //文字占宽
var font_banjing=font_width/2;//文字半径

var all_width=font_width*6+num_width*12;
var mg_left=(win_width-all_width)/2;
var mg_top=20;


var oldtime=new Date("2016/7/30,16:30:30");//定义起始时间
var oldobj_time=null;
var newobj_time=null;
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];
var balls=[];

var inpage=false;//是否切出窗口


$(function(){
    win_width=$('body').width();
    window.onblur = function(){ 
        inpage=true
    }  
    window.onfocus = function(){  
        inpage=false
    } 
    
    win_width=$('body').width();
    can_width=win_width;
    mg_left=(win_width-all_width)/2;
    var canvas=document.getElementById("canvas");
    
    canvas.width = can_width;
    canvas.height = can_height; 
    cxt=canvas.getContext("2d");
	oldobj_time=cangettime(oldtime);
    
    setInterval( function(){
        if(inpage)  return
        newobj_time=cangettime(oldtime);
	    cxt.clearRect(0,0,can_width, can_height);
  	    setcontent(newobj_time);
        canupdate();
    },50);
    
    
    
})

/**
* 判断哪个数字变化并且添加彩色小球
*/        
function canupdate(){
 	var flag=false;
    var left=0;
    if( parseInt(oldobj_time.h/10) != parseInt(newobj_time.h/10) ){
    	left=mg_left+num_width*6+font_width*3;
        addBalls(left,mg_top, parseInt(newobj_time.h/10) );
        flag=true;
    }
    if( parseInt(oldobj_time.h%10) != parseInt(newobj_time.h%10) ){
    	left=mg_left+num_width*7+font_width*3;
       addBalls( left,mg_top, parseInt(newobj_time.h/10) );
       flag=true;
    }

    if( parseInt(oldobj_time.m/10) != parseInt(newobj_time.m/10) ){
    	left=mg_left+num_width*8+font_width*4;
       addBalls( left,mg_top, parseInt(newobj_time.m/10) );
       flag=true;
    }
    if( parseInt(oldobj_time.m%10) != parseInt(newobj_time.m%10) ){
    	left=mg_left+num_width*9+font_width*4;
       addBalls( left,mg_top, parseInt(newobj_time.m%10) );
       flag=true;
    }

    if( parseInt(oldobj_time.s/10) != parseInt(newobj_time.s/10) ){
    	left=mg_left+num_width*10+font_width*5;
       addBalls( left,mg_top, parseInt(newobj_time.s/10) );
       flag=true;
    }
    if( parseInt(oldobj_time.s%10) != parseInt(newobj_time.s%10) ){
    	left=mg_left+num_width*11+font_width*5;
        addBalls( left,mg_top, parseInt(newobj_time.s%10) );
       flag=true;
    }
    if(flag){
        oldobj_time=newobj_time;
    }
    updateBalls();
} 
 /**
* 添加彩色小球到数组中
*/  
 function addBalls( x , y , num ){

    for( var i = 0  ; i < digit[num].length ; i ++ )
        for( var j = 0  ; j < digit[num][i].length ; j ++ )
            if( digit[num][i][j] == 1 ){
                var aBall = {
                    x:x+(j+1)*out_juli ,
                    y: y+(i+1)*out_juli,
                    g:1.5+Math.random(),
                    banjing:banjing,
                    vx:Math.pow( -1 , Math.ceil( Math.random()*100000 ) ) * 4,
                    vy:-5,
                    vb:0.1,
                    color: colors[ Math.floor( Math.random()*colors.length ) ]
                }

                balls.push( aBall )
            }
}
 /**
* 绘制彩色小球
*/ 
function updateBalls(){
    for( var i = 0 ; i < balls.length ; i ++ ){
        balls[i].x += balls[i].vx;
        balls[i].y += balls[i].vy;
        balls[i].vy += balls[i].g;
        if(balls[i].banjing<20) balls[i].banjing += balls[i].vb;
        if( balls[i].y >= can_height-balls[i].banjing  ){
            balls[i].y = can_height-balls[i].banjing;
            balls[i].vy = - balls[i].vy*0.75;
        }
    }

    var cnt = 0 
    for( var i = 0 ; i < balls.length ; i ++ ){
    	 if( balls[i].x + banjing > 0 && balls[i].x -banjing < can_width )
            balls[cnt++] = balls[i]
    }
       
    while( balls.length > cnt ){
        balls.pop();
    }
}



//绘制
function setcontent(time){
	var left=mg_left;
	drawnum(left,mg_top,time.year);

	left=mg_left+num_width+font_banjing;
	drawtext(left,mg_top,'年');
	
	
	left=mg_left+num_width+font_width;
	drawnum(left,mg_top,parseInt(time.month/10));
	
	left=mg_left+num_width*2+font_width;
	drawnum(left,mg_top,parseInt(time.month%10));

	left=mg_left+num_width*3+font_width+font_banjing;
	drawtext(left,mg_top,'月');

	left=mg_left+num_width*3+font_width*2;
	drawnum(left,mg_top,parseInt(time.ri/10));
	
	left=mg_left+num_width*4+font_width*2;
	drawnum(left,mg_top,parseInt(time.ri%10));

	left=mg_left+num_width*5+font_width*2+font_banjing;
	drawtext(left,mg_top,'日');

	left=mg_left+num_width*6+font_width*3;
	drawnum(left,mg_top,parseInt(time.h/10));
	
	left=mg_left+num_width*7+font_width*3;
	drawnum(left,mg_top,parseInt(time.h%10));

	left=mg_left+num_width*8+font_width*3+font_banjing;
	drawtext(left,mg_top,'时');

	left=mg_left+num_width*8+font_width*4;
	drawnum(left,mg_top,parseInt(time.m/10));
	
	left=mg_left+num_width*9+font_width*4;
	drawnum(left,mg_top,parseInt(time.m%10));

	left=mg_left+num_width*10+font_width*4+font_banjing;
	drawtext(left,mg_top,'分');

	left=mg_left+num_width*10+font_width*5;
	drawnum(left,mg_top,parseInt(time.s/10));
	
	left=mg_left+num_width*11+font_width*5;
	drawnum(left,mg_top,parseInt(time.s%10));

	left=mg_left+num_width*12+font_width*5+font_banjing;
	drawtext(left,mg_top,'秒');

	for( var i = 0 ; i < balls.length ; i ++ ){
        cxt.fillStyle=balls[i].color;

        cxt.beginPath();
        cxt.arc( balls[i].x , balls[i].y , balls[i].banjing , 0 , 2*Math.PI , true );
        cxt.closePath();

        cxt.fill();
    }
}

//绘制一个文字
function drawtext(x,y,text){
	cxt.font=font_size+"px 微软雅黑";
	cxt.textAlign="center";
	cxt.textBaseline="hanging";
	cxt.fillStyle = "rgb(0,102,153)";
	cxt.fillText(text,x,y);

}
//绘制一个数字
function drawnum(x,y,num){
    cxt.fillStyle = "rgb(0,102,153)";
    for( var i = 0 ; i < digit[num].length ; i ++ )
        for(var j = 0 ; j < digit[num][i].length ; j ++ )
            if( digit[num][i][j] == 1 ){
                cxt.beginPath();
                cxt.arc( x+(j+1)*out_juli , y+(i+1)*out_juli , banjing,0,2*Math.PI )
                cxt.closePath()
                cxt.fill()
            }
       
       
       
   }



/**
* 倒计时特效所用的时间，返回时分秒。
**/
function cangettime(oldtime){
   
	oldtime=oldtime.getTime();
	 //单位数添加前0
	function add(i){
	   	if(i<10){
	   		i="0"+i;
	   	}
	   	return i;
   }
	//定义一个函数提供给返回句柄函数使用
	var nowtime=new Date();
	var cha=parseInt((nowtime.getTime()-oldtime)/1000);
	var year=parseInt(cha/(30*24*60*60*12));
	var month=parseInt(cha/(30*24*60*60)%12);
	var ri=parseInt(cha/(24*60*60)%30);
	var h=parseInt(cha/(60*60)%24);
	var m=parseInt(cha/60%60);
	var s=parseInt(cha%60);
	
	month=add(month);
    ri=add(ri);
    s=add(s);
    m=add(m);
    h=add(h);
    return {'year':year,'month':month,'ri':ri,'h':h,'m':m,'s':s};
}
